<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="renderer" content="webkit"/>
    <meta content="跨境电商" name="keywords">
    <meta content="致力于跨境电商进出口服务" name="description">
    <link rel="shortcut icon" href="http://ceb.ceair.com:7003/static/favicon.ico" type="image/x-icon"/>
    <link rel="BookMark" href="http://ceb.ceair.com:7003/static/favicon.ico" type="image/x-icon"/>
    <!-- select2 -->
    <link rel="stylesheet" href="http://dev.infoccsp.com/staticNG/AdminLTE-2.3.7/plugins/select2/select2.min.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="http://dev.infoccsp.com/staticNG/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">
    <!-- Bootstrap-->
    <link rel="stylesheet" href="http://dev.infoccsp.com/staticNG/bootstrap-3.3.6/css/bootstrap.min.css">
    <!-- bootstrap-switch.min.css -->
    <link rel="stylesheet"
          href="http://ceb.ceair.com/staticNG/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">
    <!-- Custom style -->
    <!--<link rel="stylesheet" href="../../static/css/style.css">-->
    <!-- Font Awesome -->
    <link rel="stylesheet" href="http://dev.infoccsp.com/staticNG/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="http://dev.infoccsp.com/staticNG/ionicons-2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="http://dev.infoccsp.com/staticNG/AdminLTE-2.3.7/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="http://dev.infoccsp.com/staticNG/AdminLTE-2.3.7/dist/css/skins/_all-skins.min.css">
    <!-- jQuery -->
    <script src="http://dev.infoccsp.com/staticNG/jquery-2.2.4/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="http://dev.infoccsp.com/staticNG/bootstrap-3.3.6/js/bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="http://dev.infoccsp.com/staticNG/AdminLTE-2.3.7/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="http://dev.infoccsp.com/staticNG/AdminLTE-2.3.7/plugins/fastclick/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="http://dev.infoccsp.com/staticNG/AdminLTE-2.3.7/dist/js/app.min.js"></script>
    <!--<script src="https://rawgit.com/xmoonlight/includeHTML/master/includeHTML.js"></script>-->
    <!--<script src="//cdn.bootcss.com/jquery.hoverintent/2013.03.11/hoverintent.min.js"></script>-->
    <script src="http://dev.infoccsp.com/staticNG/includeHTML/includeHTML.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://dev.infoccsp.com/staticNG/bootstrap-table-1.11.0/dist/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="http://dev.infoccsp.com/staticNG/bootstrap-table-1.11.0/dist/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="http://dev.infoccsp.com/staticNG/bootstrap-table-1.11.0/dist/locale/bootstrap-table-zh-CN.js"
            charset="UTF-8"></script>
    <!--<script src="http://dev.infoccsp.com/staticNG/bootstrap-table-1.11.0/dist/extensions/editable/bootstrap-table-editable.min.js"></script>-->
    <!--<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>-->
    <!--<link href="http://vitalets.github.io/x-editable/assets/select2/select2.css" rel="stylesheet"/>-->
    <!--<link href="http://vitalets.github.io/x-editable/assets/select2/select2-bootstrap.css" rel="stylesheet"/>-->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>-->
    <!--<script src="http://vitalets.github.io/x-editable/assets/select2/select2.js"></script>-->
    <!--[if lt IE 9]>
    <![endif]-->
    <!--<script src="http://dev.infoccsp.com/staticNG/AdminLTE-2.3.7/plugins/select2/select2.full.min.js"></script>-->

    <!-- Latest compiled and minified JavaScript -->
    <!--<script src="http://dev.infoccsp.com/staticNG/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>-->

    <script src="http://ceb.ceair.com/staticNG/bootstrap-switch/js/bootstrap-switch.min.js"></script>

    <link href="http://ceb.ceair.com:7003/staticNG/bootstrap-fileinput-4.3.7/css/fileinput.min.css" rel="stylesheet"/>
    <script type="text/javascript"
            src="http://ceb.ceair.com:7003/staticNG/bootstrap-fileinput-4.3.7/js/fileinput.min.js"
            charset="UTF-8"></script>
    <script type="text/javascript" src="http://ceb.ceair.com:7003/staticNG/bootstrap-fileinput-4.3.7/js/locales/zh.js"
            charset="UTF-8"></script>

    <title>运单查询</title>
    <style>
        .margin-b-5 {
            margin-bottom: 5px;
        }

        .required {
            background-color: #ffffc6;
        }

        /** bootstrap 样式 */
        .btn-group-xs > .btn, .btn-xs {
            padding: 3px 5px;
        }

        /** bootstrap-table 样式 */
        .bootstrap-table .fixed-table-container {
            border: 1px solid transparent;
        }

        .bootstrap-table thead > tr > th {
            background-color: darkslategrey;
            color: #fff;
            border-right: 2px solid transparent;
            vertical-align: middle !important;
        }

        .bootstrap-table tbody > tr > td {
            border: 2px solid transparent;
        }

        /** modal dialog 样式 */
        .modal .modal-header {
            background-color: darkslategray !important;
            color: #fff !important;
        }

        .modal .modal-body {
            max-height: 450px;
            overflow-y: auto;
        }

        .btn-file:hover {
            color: #ffffff;
            background-color: #c51b26;
            border-color: #a1161f;
        }

        .btn-file {
            border-color: #e7505a;
            color: #e7505a;
            background: none;
        }
    </style>
</head>
<body class="fixed hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!--<include src="../layout/header.html"></include>-->

    <!--&lt;!&ndash; Left side column. contains the sidebar &ndash;&gt;-->
    <!--<include src="../layout/sidebar.html"></include>-->

    <!-- =============================================== -->
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                包裹清关
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-home"></i>主页</a></li>
                <li>场地操作</li>
                <li class="active">包裹清关</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">查询结果</h3>
                </div>
                <div class="box-body table-responsive">
                    <div style="">
                        <div id="toolbar2">
                            <div class="row form-inline" style="margin-right: 0px;">
                                <div class="col-md-12">
                                    <select class="form-control input-sm">
                                        <option>---请选择关区代码---</option>
                                    </select>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                        <input class="form-control input-sm form_date required" value="2017-08-07"
                                               type="text">
                                    </div>
                                    <input class="form-control input-sm" value="" type="text" placeholder="主单号">
                                    <a class="btn btn-sm btn-success"> <i class="fa fa-search"></i> 查询包裹 </a>
                                </div>
                            </div>
                        </div>
                        <table id="abnormalPackages" data-show-refresh="true" data-show-toggle="true"
                               data-show-columns="true">
                            <thead>
                            <tr>
                                <th class="text-center" data-checkbox="true"></th>
                                <th class="text-center" data-field="" data-sortable="true">主单号</th>
                                <th class="text-center" data-field="">分单号</th>
                                <th class="text-center" data-field="customs">海关状态</th>
                                <th class="text-center" data-field="inspection">国检状态</th>
                                <th class="text-center" data-field="ground">场地状态</th>
                                <th class="text-center" data-field="arrvTime">到达时间</th>
                                <th class="text-center" data-field="dspTime">派送时间</th>
                            </tr>
                            </thead>
                        </table>
                    </div>

                    <div class="row form-inline" style="margin-right: 0px;">
                        <div class="col-md-12">
                            <input class="form-control input-sm" value="" type="text" placeholder="主单号">
                            <input class="form-control input-sm" value="" type="text" placeholder="分单号">
                            <a class="btn btn-sm btn-success"> <i class="fa fa-search"></i> 查询包裹 </a>
                        </div>
                    </div>
                    <div id="toolbar" class="btn-group">
                        <a class="btn btn-sm btn-danger"> <i class="fa fa-trash-o"></i> 批量删除 </a>
                    </div>
                    <table id="packageTable" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
                        <thead>
                        <tr>
                            <th class="text-center" data-checkbox="true"></th>
                            <th class="text-center" data-field="" data-sortable="true">主单号</th>
                            <th class="text-center" data-field="">分单号</th>
                            <th class="text-center" data-field="">延误原因</th>
                            <th class="text-center" data-field="">延误原因说明</th>
                            <th class="text-center" data-field="">最终处理方式</th>
                            <th class="text-center" data-field="">状态</th>
                            <th class="text-center" data-field="">附件</th>
                            <th class="text-center" data-field="operation" data-formatter="operationFormatter"
                                data-width="120px">操作
                            </th>
                        </tr>
                        </thead>
                    </table>

                    <h5 class="">无法配送原因分析</h5>
                    <div class="row" style="margin-right: 0px; padding-top: 0px;">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <input class="form-control input-sm required" value="" type="text"
                                           placeholder="分单号">
                                </div>
                                <div class="col-md-6 form-group">
                                    <input class="form-control input-sm required" value="11214213511" type="text"
                                           disabled>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <select class="form-control input-sm required">
                                        <option>---请选择原因---</option>
                                    </select>
                                </div>
                                <div class="col-md-6 form-group">
                                    <input class="form-control input-sm" value="" type="text"
                                           placeholder="原因说明，选择其他时必填">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <input class="form-control input-sm" value="" type="text"
                                           placeholder="最终无法完成配送的，请在此处填写最终处理方式，并关闭订单">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <input name="status" type="checkbox" data-size="small" data-on-text="开启订单"
                                           data-off-text="关闭订单"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <img src="http://www.placehold.it/160x100/EFEFEF/AAAAAA&text=no+image">
                                    <img id="targetimg" src="http://www.placehold.it/160x100/EFEFEF/AAAAAA&text=no+image">
                                    <img src="http://www.placehold.it/160x100/EFEFEF/AAAAAA&text=no+image">
                                </div>
                            </div>
                            <div class="row" style="text-align: center; margin-top: 10px;">
                                <div class="col-md-12">
                                    <span class="btn btn-file btn-flat btn-sm">
                                        <span class=""> 拍照上传 </span>
                                        <input type="file" name="...">
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6" style="text-align: center; padding: 30px;">
                            <form th:action="@{/demo/test2}" enctype="multipart/form-data" method="post">
                                <!--<input type="text" name="username"/>-->
                                <input type="text" name="password"/>
                                <input type="text" name="nickname"/>
                                <!--<input type="file" name="file" multiple>-->
                                <!--<input type="file" name="file2" multiple>-->
                                <!--<input type="file" name="file3" multiple>-->
                                <button type="submit">提交</button>
                            </form>


                            <!--<span style="font-size: 150%; color: darkred; font-weight: bold">这里显示包裹当前清关和场地操作的状态，供用户参考</span>-->
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>

    <!-- =============================================== -->

    <!--<include src="../layout/sidebar.html"></include>-->
</div>
<script>
    $(function () {
        $('[name="status"]').bootstrapSwitch();

        $('#packageTable').bootstrapTable({
            data: [{}],
            cache: false,                                      // 是否使用缓存
            striped: true,										// 隔行变色
            pagination: true,                                  // 是否显示分页（*）
            pageNumber: 1,                                      // 初始化加载第一页，默认第一页
            pageSize: 5,                                       // 每页的记录行数（*）
            pageList: [5, 20, 50, 100],                        // 可供选择的每页的行数（*）
            toolbar: '#toolbar'                                // 指定工作栏
        });

        $('#abnormalPackages').bootstrapTable({
            data: [
                {
                    waybillNo: '11248565775',
                    houseWaybillNo: 'LP00105723479977',
                    customs: '800',
                    inspection: '00',
                    ground: '未揽收',
                    arrvTime: '09:16',
                    dspTime: null
                },
                {
                    waybillNo: '11248565775',
                    houseWaybillNo: 'LP00105723479978',
                    customs: '500',
                    inspection: '00',
                    ground: '已揽收',
                    arrvTime: '09:16',
                    dspTime: null
                }
            ],
            cache: false,                                      // 是否使用缓存
            striped: true,										// 隔行变色
            pagination: true,                                  // 是否显示分页（*）
            pageNumber: 1,                                      // 初始化加载第一页，默认第一页
            pageSize: 5,                                       // 每页的记录行数（*）
            pageList: [5, 20, 50, 100],                        // 可供选择的每页的行数（*）
            toolbar: '#toolbar2'                                // 指定工作栏
        });
    });

    // 操作
    function operationFormatter(value, row, index, field) {
        return '<div class="btn-group">' +
            [
                '<a class="btn btn-success btn-xs" href="javascript:void(0);" onclick="preUserModify(\'' + row.username + '\')"><i class="fa fa-edit"></i>编辑</a>',
                '<a class="btn btn-danger btn-xs" href="javascript:void(0);"><i class="fa fa-trash-o"></i>删除</a>'
            ].join('') + '</div>';
    }

    var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";

    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        var dataURL = canvas.toDataURL("image/" + ext);
        return dataURL;
    }

    var image = new Image();
    image.crossOrigin = '';
    image.src = img;
    image.onload = function () {
        var base64 = getBase64Image(image);
        console.log(base64);
        $("#targetimg").attr("src", base64);
    }
</script>
</body>
</html>
